<script setup lang="ts">
import homeApi from '@/service/api/home'
import { useAppsStore } from '@/stores/modules/app'
import type { TabListItem } from '@/types/page/tab'
import pageEmitter from '@/common/mitt/page'
import { timeAgoTwo } from '@/utils'

const { width } = useWindowSize()
const useStore = useAppsStore()
const { setLoginShow } = useStore
const { getUserInfo: userInfo } = storeToRefs(useStore)
let requestSize = 0
if (width.value <= 800) {
  requestSize = 10
} else if (width.value <= 1300) {
  requestSize = 12
} else {
  requestSize = 12
}
const queryForm = ref<any>({
  author_id: null,
  current: 1,
  id: null,
  institution_id: null,
  keyword: '',
  order: 'view',
  orderType: 'desc',
  size: requestSize,
  tags: null
})
const requestLoading = ref(false)
const pageChange = (e: number) => {
  queryForm.value.current = e
  init()
}
const sizeChange = (e: number) => {
  queryForm.value.size = e
  init()
}
const total = ref(0)

interface listItem {
  id: number
  book_type: number
  cover: string
  name: string
  photo_count: number
  video_count: number
}

const list = ref<listItem[]>([])
const init = async () => {
  requestLoading.value = true
  const { data } = await homeApi.list(toRaw(queryForm.value))
  list.value = data.data
  total.value = Math.ceil(Number(data.total) / queryForm.value.size)
  requestLoading.value = false
}
init()

const router = useRouter()
const handDetail = (e: listItem) => {
  if (!userInfo.value?.id) {
    setLoginShow(true)
    return
  }
  if (e.book_type === 1) {
    router.push({
      path: '/mhdetail',
      query: {
        id: e.id
      }
    })
  } else {
    router.push({
      path: '/detail',
      query: {
        id: e.id
      }
    })
  }
}

const tabChange = (e: TabListItem) => {
  const el = document.getElementById('hor')
  pageEmitter.emit('scroll', {
    behavior: 'smooth',
    top: (el?.offsetTop || 0) + 10
  })
  if (e.id === 0) {
    queryForm.value.institution_id = null
  } else {
    queryForm.value.institution_id = e.id
  }
  init()
}
const handAll = () => {
  router.push({
    path: '/classify'
  })
}
defineExpose({
  tabChange
})

function IsPhone() {
  var info = navigator.userAgent
  return /mobile/i.test(info)
}

const isMoile = ref(IsPhone())
</script>

<template>
  <div class="diy-nav" id="hor">
    <div class="append">
      <div class="name">热门排行</div>
    </div>
    <n-button class="btn" strong secondary @click="handAll">
      <span>查看全部</span>
      <i class="esayIcon esayIcon-gengduo"></i>
    </n-button>
  </div>
  <n-spin :show="requestLoading">
    <div class="list">
      <div
        class="card hover-shadow"
        v-for="item in list"
        :key="item.id"
        @click="handDetail(item)"
      >
        <div class="cover">
          <img v-lazy="$getImg(item.cover)" />
        </div>
        <div class="name u-line-1">{{ item.name }}</div>
        <div class="tags">
          <div class="tag free" v-if="item.price === 0">限免</div>
          <div class="tag free" v-else>{{ item.price }}币</div>
          <div class="tag">{{ item.photo_count }}图</div>
          <div class="tag">{{ item.video_count }}视频</div>
        </div>
        <div class="tool">
          <div class="date">
            {{ timeAgoTwo(item.create_at) }}
          </div>
          <div class="desc">
            <span>{{ item.buy_count }}购买</span>
            <span style="padding-left: 5px">{{ item.coll_count }}收藏</span>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination" v-if="total > 1">
      <n-pagination
        v-model:page="queryForm.page"
        :page-count="total"
        :simple="isMoile"
        show-quick-jumper
        show-size-picker
        @updatePage="pageChange"
        @updatePageSize="sizeChange"
      />
    </div>
  </n-spin>
</template>

<style scoped lang="scss">
.diy-nav {
  margin: 40px 20px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .append {
    display: flex;
    align-items: center;

    img {
      width: 22px;
      height: 22px;
      margin-right: 5px;
    }

    .name {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
  }

  .esayIcon-gengduo {
    margin-left: 3px;
    font-size: 12px;
  }
}

.list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 30px 20px 0 20px;
  gap: 20px;

  .card {
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    padding-bottom: 5px;
    background: #fff;

    .cover {
      img {
        width: 100%;
        aspect-ratio: 4/5.5;
        object-fit: cover;
        -webkit-user-drag: none;
        display: block;
      }
    }

    .name {
      font-size: 14px;
      margin-top: 10px;
      color: #333;
      padding: 0 5px;
    }

    .tags {
      margin-top: 5px;
      padding: 0 5px;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;

      .tag {
        font-size: 10px;
        background: rgba(136, 136, 136, 0.1);
        padding: 0 6px;
        border-radius: 4px;
        color: #888;
      }

      .free {
        background: linear-gradient(
          317deg,
          #4d4c4c 30%,
          #7b7b7b 70%,
          #5f5c5c 100%
        );
        color: #ddd;
      }
    }

    .tool {
      margin-top: 8px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 0 5px;

      .date {
        font-size: 12px;
        color: #999;
      }

      .desc {
        margin-top: 0;
        padding: 0 5px;
        color: #999;
        font-size: 12px;
      }
    }
  }
}

.pagination {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

@media (max-width: 1300px) {
  .list {
    gap: 20px 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .diy-nav {
    margin: 20px 12px 0 12px;

    .append {
      img {
        width: 18px;
        height: 18px;
      }

      .name {
        font-size: 16px;
      }
    }

    .btn {
      font-size: 12px;
      height: 30px;
      padding: 4px 10px;
      border-radius: 5px;
    }

    .esayIcon-gengduo {
      margin-left: 1.5px;
      font-size: 10px;
    }
  }
  .list {
    margin: 10px 10px 0 10px;
    grid-template-columns: 1fr 1fr;

    .card {
      width: 141px;

      .name {
        font-weight: 550;
        font-size: 12px;
        margin-top: 5px;
      }

      .desc {
        margin-top: 0;
        color: #999;
        font-size: 11px;
      }
    }
  }
  .pagination {
    padding: 20px 0;
  }
}
</style>
